<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/mine/mineBg.png" mode="widthFix"></image>
		</view>
		<cusHeaderVue titleContent="任务详情" :showBack="true"></cusHeaderVue>
		<scroll-view scroll-y="true"
			:style="{paddingTop: `calc(${scrollerHeight} + 90rpx)`,height: `calc(100vh - ${scrollerHeight} - 90rpx`}">
			<view class="contBox">
				<view class="contBig">
					<view class="contTop">
						<view class="contTit">
							<view class="contName">
								任务信息
							</view>
							<view class="contStatus">
								未完成
							</view>
						</view>
						<view class="contLi">
							<text>任务类型：</text>{{ taskDetail.typeName }}
						</view>
						<view class="contLi">
							<text>任务描述：</text>{{ taskDetail.description }}
						</view>
					
						<view class="contLi">
							<text>下发人：</text>{{ taskDetail.createBy }}
						</view>
						<view class="contLi">
							<text>指定门店：</text>{{ taskDetail.shopName }}
						</view>
						<view class="contLi">
							<text>计划完成时间：</text>{{ taskDetail.completionTime }}
						</view>
					</view>
					<!-- 任务附件 -->
					<view v-if="taskDetail.taskFile" class="bottomFj" @click="openFile(taskDetail.taskFile)">
						<image src="/static/home/fujian.png" mode=""></image>
						<text>附件: </text>
						<text class="linkText">{{ taskDetail.taskFile.split('/').pop() }}</text>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="btnBox">
			<view class="btnLi" @click="toUrl('/pages/mine/taskFeedback')">
				提交反馈
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	const scrollerHeight = ref('');
	
	// 任务类型映射
	const taskTypeMap = {
		1: '竞品调研',
		2: '仓库整理',
		3: '项目支援'
	};

	// 任务详情数据
	const taskDetail = ref({
		typeName: '', // 任务类型名称
		description: '', // 任务描述
		completionTime: '', // 计划完成时间
		createBy: '', // 下发人
		shopName: '', // 指定门店
		taskFile: '', // 任务附件
		status: 0 // 任务状态
	});

	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}

	const toUrl = (urlSrc) => {
		// 直接使用原始的currentTaskData，确保包含所有必要字段（包括id）
		const originalTaskData = uni.getStorageSync('currentTaskData');
		if (originalTaskData) {
			uni.setStorageSync('currentTaskData', originalTaskData);
		}
		uni.navigateTo({
			url: `${urlSrc}`
		})
	}
	
	// 打开文件附件
	const openFile = (fileUrl) => {
		if (!fileUrl) return;
		uni.downloadFile({
			url: fileUrl,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.openDocument({
						filePath: res.tempFilePath,
						success: () => {
							console.log('文件打开成功');
						}
					});
				}
			}
		});
	}
	onLoad((options) => {
		getBarHeight();
		// 优先使用路由参数中的完整 item
		let source = null;
		if (!source) {
			source = uni.getStorageSync('currentTaskData');
		}
		if (source) {
			try {
				taskDetail.value = {
					typeName: taskTypeMap[source?.dxTaskDO?.taskType] || '',
					description: source?.dxTaskDO?.description || '',
					completionTime: source?.dxTaskDO?.completionTime || '',
					createBy: source?.dxTaskDO?.createUserName || source?.nickName || '',
					shopName: source?.shopName || source?.dxTaskDO?.shopName || '',
					taskFile: source?.dxTaskDO?.fileUrl || '',
					status: source?.status ?? 0
				};
			} catch (error) {
				console.error('映射任务数据失败:', error);
			}
		}
	});
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 100%;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		padding: 22rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);

		.contTop {
			width: 100%;
			border-radius: 12.82rpx 12.82rpx 0 0;
			background: #ffffff;
			box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #c0c0c03b;
			padding: 34rpx 32rpx;
			box-sizing: border-box;
			.contTit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				margin-bottom: 28rpx;
				.contName{
					font-weight: 500;
					font-size: 33.33rpx;
					color: #1C2027;
					flex: 1;
				}
				.contStatus{
					width: 94.87rpx;
					height: 38.46rpx;
					border-radius: 7.69rpx 7.69rpx 7.69rpx 7.69rpx;
					background: #fd503e;
					font-size: 24.36rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.contLi{
				color: #4a4a4a;
				 font-weight: 400;
				 font-size: 25.64rpx;
				 line-height: 44.87rpx;
				text{
					color: #7f8494;
				}
			}
			
		}
		.bottomFj{
			background: #e5eeff;
			font-size: 24.36rpx;
			font-weight: 400;
			color: #4580F6;
			display: flex;
			align-items: center;
			border-radius:  0 0 12.82rpx 12.82rpx;
			padding: 35rpx 32rpx;
			box-sizing: border-box;
			cursor: pointer;
			image{
				width: 21.79rpx;
				height: 24.36rpx;
				margin-right: 13rpx;
			}
		}
		.linkText {
			color: #4580F6;
			text-decoration: underline;
		}
		.contBig {
			border-radius: 12.82rpx;
			overflow: hidden;
			background: #ffffff;
			box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #c0c0c03b;
		}
	}

	.btnBox {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		// bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 20rpx 55rpx calc(env(safe-area-inset-bottom) + 20rpx);
		box-sizing: border-box;
		background: #f2f3f5;

		.btnLi {
			height: 80rpx;
			border-radius: 40.38rpx 40.38rpx 40.38rpx 40.38rpx;
			background: linear-gradient(-90deg, #feaf38, #f98434);
			box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
			color: #ffffff;
			width: 512.82rpx;
			
			font-size: 32.05rpx;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		
	}
</style>